<template>
	<div>
		<div id="cesiumContainer"></div>
	</div>
</template>

<script>
//需求：在地球上点击一个位置，自动在地球上加一个点
export default {
  data () {
		return {
		}
  },

  mounted () {
    /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
   //定义加点的方法
	let AddPoint = function (params) {
	//首先必须提供你要画点位置的经纬度
      if(params.lon === undefined || params.lat === undefined){
        alert('请提供经纬度!');
        return;
	  }
	//创建点实体实例  实体对象里面一个属性是point
      let entity = new Cesium.Entity({
        id: params.id || `${params.lon}点`,
        name:params.name || '点',
        show:true,
        position:Cesium.Cartesian3.fromDegrees(params.lon, params.lat),
        point:new Cesium.PointGraphics ( {
          show : true,
          pixelSize : params.pixelSize || 5,
          heightReference : params.pixelSize || Cesium.HeightReference.NONE,
          color : params.color || new Cesium.Color ( 255 , 0 , 0 , 1 ),
          outlineColor : params.color || new Cesium.Color ( 0 , 0 , 0 , 0 ),
          outlineWidth : params.outlineWidth || 0,
          scaleByDistance : params.scaleByDistance || new Cesium.NearFarScalar ( 0 , 1 , 5e10 , 1 ),
          translucencyByDistance : params.translucencyByDistance || new Cesium.NearFarScalar ( 0 , 1 , 5e10 , 1 ),
		 distanceDisplayCondition: params.translucencyByDistance || new Cesium.DistanceDisplayCondition(0, 4.8e10)
					// distanceDisplayCondition : params.translucencyByDistance || new Cesium.DistanceDisplayCondition(0, 4.8e10),
        })
      });
      viewer.entities.add(entity);//不断地将点实体实例添加到entities这个类  这才是加点的关键所在 如果不保存进去，不会出现点的
      return entity;
	}

	//////////////////////////创建地球实体////////////////////////////////////////
	var viewer = new Cesium.Viewer('cesiumContainer', {
      selectionIndicator: false,
      animation: false,
      baseLayerPicker: true,
      timeline: false,
      sceneModePicker: true,
      navigationHelpButton: false,
      useDefaultRenderLoop: true,
      showRenderLoopErrors: true,
      fullscreenButton: false,
      infoBox: false
	});
	//隐藏版权
	viewer.cesiumWidget.creditContainer.style.display = 'none';
    //观察的初始位置
    viewer.camera.setView({
      destination:Cesium.Cartesian3.fromDegrees(116.46,39.92,10000000.0),
	});
	//创建当前3D场景中的鼠标实例
	let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
	//绑定鼠标事件
    handler.setInputAction(function(event) {
	//pickEllipsoid(windowPosition, ellipsoid, result)选择一个椭球或地图
	//如果选择了椭球或地图，则返回椭球或地图表面上的点在世界坐标系中。如果未选择椭球或地图，则返回undefined。
	//pickEllipsoid()方法返回的是鼠标点的坐标 （x, y, z） 
      var earthPosition  = viewer.camera.pickEllipsoid(event.position,viewer.scene.globe.ellipsoid);
      if (Cesium.defined(earthPosition)) {
        //我们所操作的地球 
        let ellipsoid = viewer.scene.globe.ellipsoid;
        //cartesianToCartographic (cartesian, result ) 将提供的笛卡尔转换为制图表达。直角坐标在椭圆体的中心是不确定的。 
        let cartographic = ellipsoid.cartesianToCartographic(earthPosition);
        let lat = Cesium.Math.toDegrees(cartographic.latitude);
        let lon = Cesium.Math.toDegrees(cartographic.longitude);
        let params = {
          id:'测试'+lon,
          name:'text',
          lon:lon,
          lat:lat
        };
        alert = AddPoint(params);
        
	  }
      console.dir( alert);//Entity实体对象 
	  console.dir( viewer.scene.globe.ellipsoid);//地球对象
	  console.dir( earthPosition);//笛卡尔坐标系 （x,y,z）
	  console.dir( viewer.scene.globe.ellipsoid.cartesianToCartographic(earthPosition))//换成了经度纬度高度的格式;
    }, Cesium.ScreenSpaceEventType.LEFT_CLICK)//鼠标左击事件
  }
	/*
  mounted () {
    let addPoint = function (params) {
	  	if(params.lon === undefined || params.lat === undefined) {
				alert('请输入坐标的经纬度！');
				return;
	  	}
	  	let entity = new Cesium.Entity ({
				id: params.id || `${params.lon}点`,
				name: params.name || '小不点',
				show: true,
				position: Cesium.Cartesian3.fromDegrees(params.lon, params.lat),
				point: new Cesium.PointGraphics({
	    		show: true,
		  		pixelSize: params.piexlSize || 5,
		  		heightReference: params.piexlSize || Cesium.HeightReference.NONE,
		  		color: params.color || new Cesium.Color(255, 255, 0, 1),
		  		outlineColor: params.color || new Cesium.Color(0, 0, 0, 0),
		  		outlineWidth: params.outlineWidth || 0,
		  		scaleByDistance : params.scaleByDistance || new Cesium.NearFarScalar ( 0 , 1 , 5e10 , 1 ),
          translucencyByDistance : params.translucencyByDistance || new Cesium.NearFarScalar ( 0 , 1 , 5e10 , 1 ),
          distanceDisplayCondition : params.translucencyByDistance || new Cesium.DistanceDisplayCondition(0, 4.8e10)
	    	})
    	});
    	viewer.entities.add(entity);
	  	return entity;
  	}
		var viewer = new Cesium.Viewer('cesiumContainer');
		viewer._cesiumWidget._creditContainer.style.display = 'none';
		viewer.camera.setView({
	  	destination: Cesium.Cartesian3.fromDegrees(116.46, 39.92, 200000000.0)
		});
		let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
		handler.setInputAction(function (event){
	  	var earthPosition = viewer.camera.pickEllipsoid(event.position, viewer.scene.globe.ellipsoid);
	  	if(Cesium.defined(earthPosition)){
				let ellipsoid = viewer.scene.globe.ellipsoid;
				let cartographic = ellipsoid.cartesianToCartographic(earthPosition);
				let lon = Cesium.Math.toDegrees(cartographic.longtitude);
				let lat = Cesium.Math.toDegrees(cartographic.latitude);
				let params = {
		 			id: '测试' + lon,
		 		 	name: 'text',
		 		 	lon: lon,
		  		lat: lat
				};
				alert = addPoint(params);
      }
		}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
  }
	*/
}

</script>

<style scoped>

</style>